<html>
  <style type="text/css">
    body {
      font-family: sans-serif;
    }
    h2 {
      border-top: 1px solid black;
      padding-top: 10px;
    }
    textarea {
      width: 100%;
      height: 100px;
    }
  </style>
  <script type="text/javascript" src="outfox.js"></script>
  <script type="text/javascript">
function onLoad(event) {
    outfox.init("box", onPageReady);
}

function enableButtons(run, stop) {
    var buttons = document.getElementsByTagName('button');
    for(var i=0; i < buttons.length; i++) {
        var b = buttons[i];
	if(b.id == 'stop') {
	    b.disabled = !stop;
	} else {
            b.disabled = !run;
	}
    }
}

function onPageReady() {
    enableButtons(true);
}

function test1(button) {
    enableButtons(false);
    var node = document.getElementById('test1-text');
    var token = outfox.addObserver(function(tts, cmd) {
        if(cmd.action == 'finished-say') {
            enableButtons(true);
            tts.removeObserver(token);
        }
    });
    outfox.say(node.innerHTML);
    
}

function test2(button) {
    enableButtons(false);
    var token = outfox.addObserver(function(tts, cmd) {
        if(cmd.action == 'finished-play') {
	    enableButtons(true);
            tts.removeObserver(token);
        }
    });
    outfox.play(window.location.href+'/../bell.mp3');
}

function test3(button) {
    var node = document.getElementById('test3-text');
    enableButtons(false);
    var token = outfox.addObserver(function(tts, cmd) {
        if(cmd.action == 'finished-play') {
	    enableButtons(true);
            tts.removeObserver(token);
        }
    });
    outfox.say(node.innerHTML);
    outfox.play(window.location.href+'/../bell.mp3');
}

function test4(button) {
    var node = document.getElementById('test4-text');
    enableButtons(false);
    var count = 0;
    var callback = function(tts, cmd) {
        if(cmd.action == 'finished-play' || cmd.action == 'finished-say') {
            count++;
        }
        if(count == 2) {
	    enableButtons(true);
            tts.removeObserver(token_speech);
            tts.removeObserver(token_sound);
        }
    }
    var token_speech = outfox.addObserver(callback);
    var token_sound =  outfox.addObserver(callback, 1);
    outfox.say(node.innerHTML);
    outfox.play(window.location.href+'/../bell.mp3', 1);
}

function test5(button) {
    enableButtons(false);
    var count = 0;
    var token = outfox.addObserver(function(tts, cmd) {
        if(cmd.action == 'finished-say') {
            if(count == 0) {
                count++;
            } else if(count == 1) {
		enableButtons(true);
                tts.removeObserver(token);
            }
        }
    });
    outfox.setProperty('rate', 100);
    outfox.setProperty('volume', 0.3);
    var node = document.getElementById('test5-text1');
    outfox.say(node.innerHTML);
    outfox.setProperty('rate', 500);
    outfox.setProperty('volume', 1.0);
    var node = document.getElementById('test5-text2');
    outfox.say(node.innerHTML);
    outfox.reset();
}

function test6(button) {
    enableButtons(false, true);
    outfox.setProperty('loop', true);
    outfox.play(window.location.href+'/../bell.mp3');
}

function test6Stop() {
    var button = document.getElementById('test6-button');
    enableButtons(true, false);
    outfox.stop();
    outfox.reset();
}

function test7(button) {
    var logger = document.getElementById('test7-console');
    enableButtons(false);
    var count = 0;
    var callback = function(tts, cmd) {
        logger.innerHTML = JSON.stringify(cmd) + '\n' + logger.innerHTML;
        if(cmd.action == 'finished-play' || cmd.action == 'finished-say') {
            count++;
        }
        if(count == 2) {
            enableButtons(true);
            tts.removeObserver(token_speech);
            tts.removeObserver(token_sound);
        }
    }
    var token_speech = outfox.addObserver(callback, 0);
    var token_sound =  outfox.addObserver(callback, 1);
    var node = document.getElementById('test7-text');
    outfox.say(node.innerHTML, 0, 'my speech name');
    outfox.play(window.location.href+'/../bell.mp3', 1, 'my sound name');
}
  </script>
  <body onload="onLoad()">
    <h1>Outfox Tests</h1>
    <div id="box"></div>
    <div>
      <h2>Single Speech</h2>
      <p id="test1-text">Click the button to speak this text.</p>
      <button onclick="test1(this)" disabled="true">Run</button>
    </div>
    <div>
      <h2>Single Sound</h2>
      <p>Click the button to play a sound.</p>
      <button onclick="test2(this)" disabled="true">Run</button>
    </div>
    <div>
      <h2>Queuing</h2>
      <p id="test3-text">Click the button to queue speech and then a sound.</p>
      <button onclick="test3(this)" disabled="true">Run</button>
    </div>    
    <div>
      <h2>Concurrency</h2>
      <p id="test4-text">Click the button to play speech and sound concurrently.</p>
      <button onclick="test4(this)" disabled="true">Run</button>
    </div>    
    <div>
      <h2>Speech Properties</h2>
      <p><span id="test5-text1">Click to hear a slow, soft sentence.</span> <span id="test5-text2">Click to hear a louder, fast sentence.</span></p>
      <button onclick="test5(this)" disabled="true">Run</button>
    </div>    
    <div>
      <h2>Sound Properties</h2>
      <p>Click to hear a looping sound. Click the stop button to end it.</p>
      <button id="test6-button" onclick="test6(this)" disabled="true">Run</button><button onclick="test6Stop()" disabled="true" id="stop">Stop</button>
    </div>    
    <div>
      <h2>Callbacks</h2>
      <p id="test7-text">Click to see speech and sound callbacks. The speech should finish last with the sound finishing somewhere in the middle.</p>
      <textarea id="test7-console"></textarea>
      <p><button onclick="test7(this)" disabled="true">Run</button></p>
    </div>
  </body>
</html>
